<template>
    <div class="templateBox">
        <div class="templateTop">
            <h1>{{ title }}</h1>
            <span v-if="title === '今日推荐'">开通会员免费用</span>
            <button>精选推荐</button>
            <p>
              <router-link to="/home/threeIndex">查看更多</router-link>  
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </p>
        </div>
        <Sliding_Card :show="show" :list="list" :clicks="clicks" />
    </div>
</template>

<script setup lang="ts">
import Sliding_Card from './Sliding_Card.vue'
import { defineProps, toRefs } from 'vue';

const prors = defineProps({
    show: {
        type: Boolean,//接受的数据类型
        default: false,//接受默认数据
    },
    title: String,
    list: Array
})
const { show, title, list } = toRefs(prors)

const clicks  = () => {
    console.log(11);
}

</script>

<style scoped lang="scss">
.templateBox {
    width: 100%;
    height: 340px;
    margin-top: 20px;
    margin-bottom: 40px;

    .templateTop {
        width: 100%;
        height: 33px;
        margin-left: 10px;
        line-height: 33px;

        h1 {
            font-weight: bold;
            font-size: 24px;
            float: left;
        }

        span {
            color: #c28f66;
            margin-left: 10px;
            float: left;
            margin-top: 2px;
        }

        button {
            width: 90px;
            height: 33px;
            color: #1261ff;
            font-weight: bold;
            margin-left: 50px;
            border-radius: 20px;
            background: #f3f4f7;
            margin-top: 2px;
            border: none;
            float: left;
        }

        p {
            float: right;
            margin-right: 20px;

            .el-icon {
                float: right;
                margin-top: 10px;
            }
        }
    }
}
</style>